
import React, { Component } from 'react'

// 配置路由步骤
// 1 导入 BrowserRouter,Route,Switch,Redirect组件
    // 1.1  将BrowserRouter通过as重命名为Router
import{Router,Route,Switch} from "react-router-dom"
import Login from "./pages/Login"
import Layout from "./pages/Layout"
import TextPage from "./pages/TextPage"
import AuthRoute from './components/AuthRoute'
import history from 'utils/history'

// export default class App extends Component {
//   render() {
//     return (
//         // 2 实例化路由Router
//         //    所有的代码,都要包在Router组件内
//      <Router>
//           {/* 3.通过Switch和Route组件,设置匹配规则和挂载点
//           Switch负责匹配到第一个组件后,不再向后继续匹配 
//           Switch要包住所有的Route组件*/}
//          <Switch>
//              {/* 重定向Redirect    需要配合exact使用 */}
//          {/* <Redirect path='/' to='/layout' exact></Redirect> */}
//              {/* Route路由中,默认是不会匹配到第一个就停止匹配 */}
//              <Route path="/login" component={Login}></Route>
//              <Route path="/"
//               // component={Layout}
//               //1.将component属性改写成render写法
//               render={(props)=>{
//                 //render函数一定要有返回值,返回值是一个组件
//                 //2.把原来的history等props设置给返回的组件
//                 //一定把形参中的props,设置给返回的组件,否则会出现报错
//                 console.log('props  ----->  ', props);
//                 return <Layout {...props}></Layout>
//               }}
//               ></Route>
//          </Switch>
//      </Router>
      
//         // {/* React路由中，匹配任意路径的写法:3种 */}


//           // {/* <Route component={() => <h1>匹配任意路径</h1>}></Route> */}
//           // {/* <Route path="*" component={() => <h1>匹配任意路径</h1>}></Route> */}
//           // {/* <Route path="/" component={() => <h1>匹配任意路径</h1>}></Route> */}



//             // React路由的使用口诀：
//       // 1. Router代表实例化组件，整个项目只用一次
//       // 2. Router包住所有的diam
//       // 3. Switch包住所有的Route组件

//     )
//   }
// }


export default class App extends Component {
  render() {
    return (
     <Router history={history}>
         <Switch>
             <Route path="/login" component={Login}></Route>
             <Route path="/text" component={TextPage}></Route>
             <AuthRoute path='/' component={Layout} aa='123'></AuthRoute>
            
         </Switch>
     </Router>
      
    )
  }
}

